  <template>
  <div class="page-container">

    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size">
        <el-row class="search-input">
            <el-form-item label="操作时间：">
              <el-date-picker v-model="filters.startEndTime" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
               size="mini" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item label="操作帐号：">
              <el-input clearable v-model="filters.creatorName" placeholder="输入操作账号"></el-input>
            </el-form-item>
            <el-form-item label="操作类型：">
                <el-select v-model="filters.operateType" placeholder="全部" clearable>
                    <el-option label="新增" value="1"></el-option>
                    <el-option label="编辑" value="2"></el-option>
                    <el-option label="删除" value="3"></el-option>
                </el-select>
            </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="el-icon-search"
              :label="'搜索'"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              type="primary"
              @click="resetForm()"
              :label="$t('action.reset')"
              icon="fa fa-refresh"
            >
            </kt-button>
          </el-form-item>
          <!-- <el-form-item>
            <kt-button label="审核" type="primary" @click="sysRoleMenuVerify"/>
          </el-form-item> -->
        </el-row>

      </el-form>
    </div>
    <!--表格内容栏-->
    <jic-table
      :operationWidth='300'
      :height="220"
      :highlightCurrentRow="true"
      :data="pageResult"
      :columns="columns"
      :showBatchDelete="false"
      :showEditOperation="false"
      :showDeleteOperation="false"
      :showDetailOperation="true"
      @findPage="findPage"
      @handleDetail="handleDetail"
      ref="JicTable"
    ></jic-table>

    <!-- 查看详情 -->
    <el-dialog class="el-dialog-style" width="30%" :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="verifyForm">
            <el-form-item label="角色名称：">
                <span>{{verifyForm.roleName}}</span>
            </el-form-item>
            <el-form-item label="操作权限">
                  <el-input type="textarea"  :rows="4"  v-model="verifyForm.textarea" style="width: 85%; float: right; margin-top: 6%;"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" plain @click="dialogFormVisible =  false" size="mini">关 闭</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import JicTable from "@/views/Core/JicTable";
import KtButton from "@/views/Core/KtButton";
import TableTreeColumn from "@/views/Core/TableTreeColumn";
import { format } from "@/utils/datetime";
import utils from "@/assets/js/utils.js";
export default {
  components: {
    JicTable,
    KtButton,
    TableTreeColumn,
  },
  data() {
    return {

      dialogFormVisible: false,
      verifyForm: {}, //审核弹窗form
      size: "small",
      filters: {
        startEndTime:[],
        updateTimeS:"",
        updateTimeE:"",
        creatorName:"",
        operateType:"",
      },
      columns: [
        { prop: "id", label: "ID", minWidth: 50 },
        { prop: "operateType", label: "操作类型", minWidth: 120 ,formatter: this.operateTypeFormatter},
        { prop: "creatorName", label: "操作帐号", minWidth: 120 },
        { prop: "createTime", label: "操作时间", minWidth: 120 },
        { prop: "updaterName", label: "审核人", minWidth: 120 },
        { prop: "updateTime", label: "审核时间", minWidth: 120 },
        { prop: "status", label: "审核结果", minWidth: 120 ,formatter: this.statusFormatter},
        { prop: "remark", label: "描述", minWidth: 120, formatter: this.remarkFormatter},
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      title:""
    };
  },
  methods: {
    operateTypeFormatter(row, column, cellValue, index) {
      if (cellValue == 1) {
        return '新增'
      } else if (cellValue == 2) {
        return '编辑'
      } else if (cellValue == 3) {
        return '删除'
      }
    },
    statusFormatter(row, column, cellValue, index) {
      if (cellValue == 1) {
        return '待审核'
      } else if (cellValue == 2) {
        return '审核通过'
      } else if (cellValue == 3) {
        return '审核拒绝'
      }
    },
    remarkFormatter(row, column, cellValue, index) {
      if (row.operateType == 1) {
        let desc = '添加角色：'+row.roleName;
        return desc;
      } else if (row.operateType == 2) {
        let desc = '编辑角色：'+row.roleName;
        return desc;
      } else if (row.operateType == 3) {
        let desc = '删除角色：'+row.roleName;
        return desc;
      }
    },
    // 获取当前选中部门的名称
    selectDept(val) {
      console.log('selectDepart', val)
      this.selectDepart = val;
      this.handleRoleSelectChange(val);
    },
    findDeptTree(){
      var that = this;
      this.utils.request.findDeptTree({},res=>{
        if(res.code=="0000"){
          that.options = res.data;
        }
      });
    },
    // 获取分页数据
    findPage: function(data) {
      /**
       * 子组件传过来的分页参数
       * data.start 当前页
       * data.limit 当前页总条数
       * */
      let that = this;
      if(data != null && data.start != null){
        if(data.start != null){
          that.pageRequest.pageNum = data.start;
        }
        if(data.pageSize != null){
          that.pageRequest.pageSize = data.limit;
        }
      }
      if (that.filters == undefined || that.filters == null) {
        that.filters = {};
      }
      if(that.filters.startEndTime.length!=0){
        that.filters.updateTimeS = that.filters.startEndTime[0];
        that.filters.updateTimeE = that.filters.startEndTime[1];
      }
      that.filters.start = this.pageRequest.pageNum;
      that.filters.limit = this.pageRequest.pageSize;
      this.utils.request.sysRoleMenuVerifyQueryPage(that.filters, function (res) {
        if (res.data == null) {
          res.data = [];
          res.totle = 0;
        }
        that.$refs.JicTable.findPage({content:res.data.rows,total:res.data.total});
      });
    },
    //查看详情
    handleDetail: function(data) {
      let that = this;
      console.log(data)
      if(data.row.operateType == 1){
        that.title = "添加角色日志详情";
      }else if(data.row.operateType == 2){
        that.title = "编辑角色日志详情";
      }else{
        that.title = "删除角色日志详情";
      }
      that.verifyForm.roleName = data.row.roleName;
      that.dialogFormVisible = true;
    },
    //重置
    resetForm() {
      this.filters = {
        startEndTime:[],
        updateTimeS:"",
        updateTimeE:"",
        creatorName:"",
        operateType:"",
      };
      this.findPage();
    }
  },
  mounted() {
    this.findDeptTree();
  }
};
</script>
<style scoped lang="scss">
.menu-container {
  margin-top: 10px;
}
.menu-header {
  padding-left: 8px;
  padding-bottom: 5px;
  text-align: left;
  font-size: 16px;
  color: rgb(20, 89, 121);
}
.reset {
    background-color: #fff;
    color: #2F4554;
  }
</style>
